<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>API接口统计</span>
            </div>
          </template>
          <div class="card-content">
            <div class="stat-item">
              <div class="stat-value">{{ stats.totalApis }}</div>
              <div class="stat-label">总接口数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ stats.activeApis }}</div>
              <div class="stat-label">已启用接口</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>数据源统计</span>
            </div>
          </template>
          <div class="card-content">
            <div class="stat-item">
              <div class="stat-value">{{ stats.totalDataSources }}</div>
              <div class="stat-label">数据源总数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ stats.connectedDataSources }}</div>
              <div class="stat-label">已连接数据源</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="dashboard-card">
          <template #header>
            <div class="card-header">
              <span>系统状态</span>
            </div>
          </template>
          <div class="card-content">
            <div class="stat-item">
              <div class="stat-value">{{ stats.onlineUsers }}</div>
              <div class="stat-label">在线用户</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ stats.todayRequests }}</div>
              <div class="stat-label">今日请求数</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const stats = ref({
  totalApis: 156,
  activeApis: 142,
  totalDataSources: 24,
  connectedDataSources: 20,
  onlineUsers: 12,
  todayRequests: "1.2k",
});
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.dashboard-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}
</style> 